<template>
  <div class="notification-system">
    <TransitionGroup
      name="notification"
      tag="div"
      class="notification-container"
    >
      <div
        v-for="notification in notifications"
        :key="notification.id"
        :class="[
          'notification',
          `notification--${notification.type}`,
          { 'notification--persistent': notification.persistent }
        ]"
        @click="handleNotificationClick(notification)"
      >
        <div class="notification__icon">
          <component :is="getIcon(notification.type)" />
        </div>
        
        <div class="notification__content">
          <div class="notification__title">{{ notification.title }}</div>
          <div v-if="notification.message" class="notification__message">
            {{ notification.message }}
          </div>
          <div v-if="notification.details" class="notification__details">
            {{ notification.details }}
          </div>
        </div>
        
        <div class="notification__actions">
          <button
            v-for="action in notification.actions"
            :key="action.id"
            :class="['notification__action', `notification__action--${action.type}`]"
            @click.stop="handleAction(notification, action)"
          >
            {{ action.label }}
          </button>
        </div>
        
        <button
          v-if="!notification.persistent"
          class="notification__close"
          @click.stop="removeNotification(notification.id)"
        >
          <CloseIcon />
        </button>
        
        <div
          v-if="!notification.persistent && notification.duration"
          class="notification__progress"
          :style="{ animationDuration: `${notification.duration}ms` }"
        />
      </div>
    </TransitionGroup>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted } from 'vue'
import { useNotificationStore } from '@/stores/notification'
import type { Notification, NotificationAction } from '@/types/notification'

// 图标组件
const InfoIcon = () => h('svg', { 
  viewBox: '0 0 24 24', 
  fill: 'currentColor',
  class: 'w-5 h-5'
}, [
  h('path', { d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z' })
])

const SuccessIcon = () => h('svg', { 
  viewBox: '0 0 24 24', 
  fill: 'currentColor',
  class: 'w-5 h-5'
}, [
  h('path', { d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' })
])

const WarningIcon = () => h('svg', { 
  viewBox: '0 0 24 24', 
  fill: 'currentColor',
  class: 'w-5 h-5'
}, [
  h('path', { d: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z' })
])

const ErrorIcon = () => h('svg', { 
  viewBox: '0 0 24 24', 
  fill: 'currentColor',
  class: 'w-5 h-5'
}, [
  h('path', { d: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z' })
])

const CloseIcon = () => h('svg', { 
  viewBox: '0 0 24 24', 
  fill: 'currentColor',
  class: 'w-4 h-4'
}, [
  h('path', { d: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' })
])

const notificationStore = useNotificationStore()

const notifications = computed(() => notificationStore.notifications)

const getIcon = (type: string) => {
  switch (type) {
    case 'success': return SuccessIcon
    case 'warning': return WarningIcon
    case 'error': return ErrorIcon
    default: return InfoIcon
  }
}

const handleNotificationClick = (notification: Notification) => {
  if (notification.onClick) {
    notification.onClick(notification)
  }
}

const handleAction = (notification: Notification, action: NotificationAction) => {
  if (action.handler) {
    action.handler(notification, action)
  }
  
  if (action.autoClose !== false) {
    removeNotification(notification.id)
  }
}

const removeNotification = (id: string) => {
  notificationStore.removeNotification(id)
}

// 键盘快捷键
const handleKeydown = (event: KeyboardEvent) => {
  if (event.key === 'Escape') {
    // ESC 键关闭最新的非持久化通知
    const latestNotification = notifications.value
      .filter(n => !n.persistent)
      .sort((a, b) => b.createdAt - a.createdAt)[0]
    
    if (latestNotification) {
      removeNotification(latestNotification.id)
    }
  }
}

onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})
</script>

<style scoped>
.notification-system {
  position: fixed;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: var(--z-toast);
  pointer-events: none;
}

.notification-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: 400px;
}

.notification {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-modal);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.notification:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl), 0 0 20px rgba(0, 212, 255, 0.2);
}

.notification--info {
  border-left: 4px solid var(--info-color);
}

.notification--success {
  border-left: 4px solid var(--success-color);
}

.notification--warning {
  border-left: 4px solid var(--warning-color);
}

.notification--error {
  border-left: 4px solid var(--error-color);
}

.notification--persistent {
  border-width: 2px;
  border-style: dashed;
}

.notification__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.notification--info .notification__icon {
  color: var(--info-color);
}

.notification--success .notification__icon {
  color: var(--success-color);
}

.notification--warning .notification__icon {
  color: var(--warning-color);
}

.notification--error .notification__icon {
  color: var(--error-color);
}

.notification__content {
  flex: 1;
  min-width: 0;
}

.notification__title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
}

.notification__message {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: var(--spacing-xs);
}

.notification__details {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.3;
}

.notification__actions {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

.notification__action {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.notification__action--primary {
  background: var(--primary-color);
  color: var(--bg-primary);
}

.notification__action--primary:hover {
  background: var(--primary-light);
}

.notification__action--secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
}

.notification__action--secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.notification__action--danger {
  background: var(--error-color);
  color: var(--text-primary);
}

.notification__action--danger:hover {
  background: #ff5252;
}

.notification__close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.notification__close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}

.notification__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  animation: progress-bar linear forwards;
}

@keyframes progress-bar {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* 过渡动画 */
.notification-enter-active {
  transition: all 0.3s ease-out;
}

.notification-leave-active {
  transition: all 0.3s ease-in;
}

.notification-enter-from {
  opacity: 0;
  transform: translateX(100%) scale(0.9);
}

.notification-leave-to {
  opacity: 0;
  transform: translateX(100%) scale(0.9);
}

.notification-move {
  transition: transform 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .notification-system {
    top: var(--spacing-md);
    right: var(--spacing-md);
    left: var(--spacing-md);
  }
  
  .notification-container {
    max-width: none;
  }
  
  .notification {
    padding: var(--spacing-sm);
  }
  
  .notification__title {
    font-size: var(--text-xs);
  }
  
  .notification__message {
    font-size: var(--text-xs);
  }
}

@media (max-width: 480px) {
  .notification {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .notification__actions {
    align-self: stretch;
  }
  
  .notification__action {
    flex: 1;
    text-align: center;
  }
}
</style>